import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import {
  message,
  Button,
  Avatar,
  Icon,
  List,
  Card,
  Modal,
  Alert,
  Cascader,
  Tag,
} from 'antd'
import { Trans, withI18n } from '@lingui/react'
import { ProjectLink } from 'components'

const { Meta } = Card

@withI18n()
class ProjectModal extends PureComponent {
  state = {
    targetproject: {},
  }
  handleOk = () => {
    const { onOk, onCancel, devices, selected, reprojectresult } = this.props
    const { targetproject } = this.state
    if (reprojectresult) {
      onCancel()
      return
    }
    if (targetproject && targetproject.objectId) {
      let selects = []
      for (var index = 0; index < selected.length; index++) {
        let item = devices[selected[index]]
        if (item) selects.push(item.objectId)
      }
      onOk({ deviceids: selects, targetprojectid: targetproject.objectId })
    } else {
      message.error('请选择一个项目！')
    }
  }

  render() {
    const {
      form,
      finduser,
      confirmLoading,
      reprojectresult,
      projects,
      devices,
      selected,
      i18n,
      ...modalProps
    } = this.props
    const { targetproject } = this.state
    let count = reprojectresult ? reprojectresult.successed : 0
    let trueprojects = projects.filter(
      item => item.objectId !== 'all' && item.objectId !== 'recycle'
    )
    return (
      <Modal
        {...modalProps}
        closable={true}
        keyboard={false}
        confirmLoading={confirmLoading}
        // cancelText={reprojectresult ? "" : (i18n.t`Cancel`)}
        okText={reprojectresult ? i18n.t`Close` : i18n.t`Confirm`}
        onOk={this.handleOk}
      >
        <Alert
          style={{ marginBottom: '10px', background: '#fff' }}
          message={`${i18n.t`Choosed Devices`}:`}
          description={selected.map(index => {
            const item = devices[index]
            return (
              <Tag color="cyan" style={{ marginTop: '10px' }}>
                {item.DeviceName}
              </Tag>
            )
          })}
        />
        {reprojectresult ? (
          <Alert
            style={{ marginBottom: '10px', background: '#fff' }}
            message={i18n.t`Result`}
            description={
              <div>
                {count > 0 && (
                  <Alert
                    style={{ marginTop: '5px' }}
                    message={i18n.t`Successed ${count} items`}
                  />
                )}
                {reprojectresult.errors.length > 0 &&
                  reprojectresult.errors.map(item => {
                    return (
                      //123
                      <Alert
                        style={{ marginTop: '5px' }}
                        type="error"
                        message={
                          i18n.t`Device` +
                          ` ${item.DeviceName} ` +
                          i18n.t`Option failed!`
                        }
                        description={i18n.t`${item.reason}`}
                      />
                    )
                  })}
              </div>
            }
          />
        ) : (
          <Alert
            style={{ marginBottom: '10px', background: '#fff' }}
            message={
              <div style={{ display: 'inline-block' }}>
                <Trans>Move Devices To</Trans>：
                {targetproject.objectId ? (
                  <ProjectLink data={targetproject} />
                ) : (
                  <Tag>
                    <Trans>None</Trans>
                  </Tag>
                )}
              </div>
            }
            description={
              <div>
                <List
                  style={{ marginTop: '5px' }}
                  grid={{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 2 }}
                  dataSource={trueprojects}
                  renderItem={item => {
                    let choosed =
                      targetproject.objectId &&
                      targetproject.objectId === item.objectId
                    let devicecount = item.count
                    let name = item.ProjectName
                    return (
                      <List.Item>
                        <Card
                          style={{ borderColor: choosed ? '#8fc9fb' : '#fff' }}
                          actions={[
                            <Button
                              type={choosed ? 'primary' : 'default'}
                              onClick={e => {
                                this.setState({
                                  targetproject: choosed ? {} : item,
                                })
                              }}
                            >
                              <Trans>Select</Trans>
                            </Button>,
                          ]}
                        >
                          {
                            <Meta
                              title={name}
                              description={i18n.t`The ${name} project includes ${devicecount} equipment`}
                            />
                          }
                        </Card>
                      </List.Item>
                    )
                  }}
                />
              </div>
            }
          />
        )}
      </Modal>
    )
  }
}

ProjectModal.propTypes = {
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default ProjectModal
